import { defineStore } from 'pinia';
import { useTagviewStore } from './tagviewStore';
import router from '@/router';
import { RouteLocationNormalized } from 'vue-router';

interface State {
  route: RouteLocationNormalized;
  isCollapse: boolean;
  cemClassName: 'cem-open' | 'cem-close';
  courseCode: string;
}

export const useMenuStore = defineStore('menuStore', {
  state: (): State => ({
    route: {
      fullPath: '',
      hash: '',
      matched: [],
      meta: {},
      name: '',
      params: {},
      path: '',
      query: {},
      redirectedFrom: undefined,
    },
    isCollapse: false,
    cemClassName: 'cem-open',
    courseCode: '',

  }),
  getters: {
    getCemClassName: (state) => (state.isCollapse ? 'cem-close' : 'cem-open'),
    getMenuCollapse: (state) => (state.isCollapse ? 'open' : 'close'),
  },
  actions: {
    toggleCollapse(status?: boolean) {
      if (status === undefined) {
        this.isCollapse = !this.isCollapse;
      } else {
        this.isCollapse = status;
      }
      this.cemClassName = this.isCollapse ? 'cem-close' : 'cem-open';
    },
    setRoute(route: RouteLocationNormalized) {
      this.route = route;
    },
    push(url: string) {
      router.push(url)
    },
    menuSelectAction(payload: IMenu.IMenuItemAction, name: string) {
      const tagviewStore = useTagviewStore();
      tagviewStore.changeTagviewItem({
        mode: name,
        name: payload.name,
        path: payload.path,
        opened: true,
      });
    },
  },
});
